<template><el-container>
    <el-header>
      <!--导航条 -->
      <Data_navigate></Data_navigate>
    </el-header>
    <el-main>
      <el-row v-loading="loadingFlag" style="margin-top: 50px;">
        <el-col :span="12">
          <div class="grid-content ep-bg-purple">
            <div class="lucene-content">
              <el-icon style="font-size: 64px;">
                <Coin />
              </el-icon>
              <div class="title">{{ indexs.text?.title }} <span>{{ indexs.text?.size }}</span></div>
              <div class="title">{{ indexs.text?.path }}</div>
              <div class="title" style="display: flex;justify-content: center;">
                <el-button type="danger" @click="delAllIndex('text')">删除全部索引</el-button>
                <el-button type="success" @click="reIndex('text')">重建索引</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple-light">
            <div class="lucene-content">
              <el-icon style="font-size: 64px;">
                <Coin />
              </el-icon>
              <div class="title">{{ indexs.vector?.title }} <span>{{ indexs.vector?.size }}</span></div>
              <div class="title"> {{ indexs.vector?.path }}</div>
              <div class="title" style="display: flex;justify-content: center;">
                <el-button type="danger" @click="delAllIndex('vector')">删除全部索引</el-button>
                <el-button type="success" @click="reIndex('vector')">重建索引</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="padding: 40px;">
          <div title="预览文件转换进度" v-if="processState.isShow">
            <div style="margin-bottom: 8px;">{{ processState.msg }}</div>
            <el-progress :percentage="processState.percent" :stroke-width="15" striped striped-flow :duration="10" />
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import Data_navigate from '@/components/datas/data_navigate.vue';
import farm2Request from '@/service/remoteRequests/Farm2Request';
import notice from '@/components/msg/FarmNotice';
import type { DataResponse } from '@/types/commons/DataResponse';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import { onUnmounted, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import farmProcessUtils from '@/hook/farmProcessUtils';

const loadingFlag = ref(false);

let eventSource: EventSource | null;
const processState = reactive({
  isShow: false,
  percent: 1,
  msg: ''
});
const indexs = reactive({} as { text: { title: string, path: string, size: number }, vector: { title: string, path: string, size: number } });

/**
 * 加载索引信息
 */
const loadLuceneInfo = () => {
  farm2Request.submit('api/lucene/info', RequestTypeEnum.post, loadingFlag)
    .then((response: DataResponse) => {
      Object.assign(indexs, (response.data as { text: { title: string, path: string, size: number }, vector: { title: string, path: string, size: number } }))
    }).catch((msg: string) => {
      notice.byError(msg);
    });
}

loadLuceneInfo();
/**
 * 删除索引
 * @param delkey
 */
const delAllIndex = (delkey: string) => {
  ElMessageBox.confirm('确认删除?', { icon: 'QuestionFilled' })
    .then(() => {
      farm2Request.submit('api/lucene/del', RequestTypeEnum.post, loadingFlag, { key: delkey })
        .then(() => {
          loadLuceneInfo();
        }).catch((msg: string) => {
          notice.byError(msg);
        });
    }).catch(() => { });
}

/**
 * 重建索引
 * @param delkey
 */
const reIndex = (reIndexkey: string) => {
  ElMessageBox.confirm('确认重建索引?', { icon: 'QuestionFilled' })
    .then(() => {
      farm2Request.submit('api/lucene/index', RequestTypeEnum.post, loadingFlag, { key: reIndexkey })
        .then(() => {
          loadLuceneInfo();
          notice.bySuccess("开始重建");
          eventSource = farmProcessUtils.processHandle(reIndexkey, 'CONVERT_INDEX', (msg: string, percent: number) => {
            Object.assign(processState, { isShow: true, 'msg': msg, 'percent': percent })
            if (processState.percent >= 100) {
              loadLuceneInfo();
              Object.assign(processState, { isShow: false, 'msg': '', 'percent': 0 })
            }
          });
        }).catch((msg: string) => {
          notice.byError(msg);
        });
    }).catch(() => { });
}

onUnmounted(() => {
  if (eventSource) {
    eventSource.close();
  }
});
</script>
<style scoped>
/* 样式可以根据需要添加 */
.lucene-content {
  width: 70%;
  margin: auto;
  height: 200px;
  color: #555555;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
  padding: 30px;

  .title {
    margin-top: 20px;
    font-size: 16px;
  }
}
</style>
